<template>
    <div>
        <h1>表单输入与绑定</h1>
        <fieldset>
            <legend>文本</legend>
            <div id="example-1" class="div_c">
                <input type="text" v-model="message" placeholder="edit is">
                <p>Message is:{{message}}</p>
            </div>
        </fieldset>
        <fieldset>
            <legend>多行文本</legend>
            <div id="example-2" style="text-align: left">
                <span>Multiline message is:</span>
                <p style="white-space: pre-line">{{message}}</p>
                <br/>
                <textarea v-model="message" placeholder="place entry multiple lines"></textarea>
            </div>
        </fieldset>
        <fieldset>
            <legend>单个复选框</legend>
            <div id="example-3" style="text-align: left">
                <input type="checkbox" id="checkbox" v-model="checked">
                <label for="checkbox">{{checked}}</label>
            </div>
        </fieldset>
        <fieldset>
            <legend>多个复选框，绑定到同一个数组</legend>
            <div id="example-4" style="text-align: left">
                <input type="checkbox" id="jack" value="jack" v-model="checkedNames"><label for="jack">Jack</label>
                <input type="checkbox" id="john" value="john" v-model="checkedNames"><label for="john">John</label>
                <input type="checkbox" id="mike" value="mike" v-model="checkedNames"><label for="mike">Mike</label>
                <br/>
                <span>您选择的用户名是：{{checkedNames}}</span>
            </div>
        </fieldset>
        <fieldset>
            <legend>单选按钮</legend>
            <div id="example-5" style="text-align: left">
                <input type="radio" id="one" value="One" v-model="picked"><label for="one">One</label>
                <br/>
                <input type="radio" id="two" value="Two" v-model="picked"><label for="two">Two</label>
                <br/>
                <span>Picked:{{picked}}</span>
            </div>
        </fieldset>
        <fieldset>
            <legend>选择框单选</legend>
            <div id="example-6" style="text-align: left">
                <select v-model="selected">
                    <option disabled value="">请选择</option>
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                </select>
                <span>Selected:{{selected}}</span>
            </div>
        </fieldset>
        <fieldset>
            <legend>选择框多选</legend>
            <div id="example-7" style="text-align: left">
                <select v-model="multiSelected" multiple style="width: 50px">
                    <option>A</option>
                    <option>B</option>
                    <option>C</option>
                    <option>D</option>
                    <option>E</option>
                    <option>F</option>
                </select>
                <br/>
                <br/>
                <span>Selected:{{multiSelected}}</span>
            </div>
        </fieldset>
        <fieldset>
            <legend>v-for渲染动态选项</legend>
            <div id="example-8" style="text-align:left">
                <select v-model="selected">
                    <option v-for="item in options" :value="item.value" :key="item.value">
                        {{item.text}}
                    </option>
                </select>
                <span>Selected:{{selected}}</span>
            </div>
        </fieldset>
        <fieldset>
            <legend>修饰符</legend>
            <div id="example-9" style="text-align: left">
                lazy:<input v-model.lazy="msg"><span>{{msg}}</span><br/>
                number:<input v-model.number="age" type="number"><span>{{age}}</span><br/>
                trim:<input v-model.trim="msg"><span>{{msg}}</span>
            </div>
        </fieldset>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'

@Component({})
export default class FormInputBinding extends Vue {
    name = 'FormInputBinding';
    message = "";
    checked = false;
    checkedNames = [];
    picked = "";
    selected = "";
    multiSelected = [];
    options = [{text:"One",value:"A"},{text:"Two",value:"B"},{text:"Three",value:"C"}];
    msg = "";
    age = "";
}
</script>

<style scoped>
legend{
    font-size: 12px;
    text-align: left;
}
.div_c{
    text-align: left;
}
</style>
